<template>
    <div class="coursePublicity">
      <div class="top">
        <div class="title"><img src="../assets/images/course.png" /><p>课程宣传</p></div>
      </div>
      <el-row :gutter="10">
        <el-col :xs="24" :sm="24" :lg="12" class="img" v-for="(i,index) in courseList" :key="index" >
          <img :src="$downloadUrl+i.fileUrls"  style="width: 100%; height: 100% ;border-radius: 6px;" @click="amplification(i)" v-if="i.fileUrls">
          <img src="../assets/images/empty.png"  style="width: 100%; height: 100% ;border-radius: 6px;" @click="amplification(i)" v-else>
        </el-col>
      </el-row>
      <el-image-viewer
        v-if="showViewer"
        :on-close="closeViewer"
        :url-list="srcList"
      />
    </div>
</template>

<script>
  import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
  export default {
    name: 'coursePublicity',
    components:{
      ElImageViewer
    },
    created() {
      console.log("2-7/17:38的代码")
    },
    props:{
      courseList:Array
    },
    data(){
      return{
        showViewer:false,
        imgList:[
          'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
          'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
          'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
          'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
        ],
        srcList:null
      }
    },
    methods:{
      amplification(i){
        this.srcList=[]
        this.srcList.push(this.$downloadUrl+i.detailUrls)
        this.showViewer = true
        document.getElementsByTagName("body")[0].style.overflow="hidden";
        document.getElementsByTagName("body")[0].style.paddingRight=document.body.clientWidth*0.008+"px";
      },
      closeViewer(){
        this.showViewer = false
        document.getElementsByTagName("body")[0].style="";
      },
      pictureScroll(){
        console.log(111)
      }
    }
  }
</script>

<style scoped lang="less">
  .coursePublicity{
    .top{
      margin:10px 10px;
      justify-content: space-between;
      .title{
        display: flex;
        font-size: 22px;
        font-family: Microsoft YaHei;
        text-align: left;
        font-weight: 400;
        color: #333333;
        img{
          padding-right: 6px;
          border-radius: 6px;
        }
      }
    }
      .img{
        /*width: 590px;*/
        height: 200px;
        margin: 8px 0;
        img{
          width: 100%;
          height: 100%;
        }
      }
  }
</style>
